<template>
  <a-card :loading="loading">
    <search-bar :searchItems="searchItems" @search="searchHandle" />
    <table-page
      :table-cols="tableCols"
      :table-datas="tableDatas"
      :operationBtns="operationBtns"
      @operationHandel="operationHandel"
      :selectOptionDatas="selectOptionDatas"
    />
    <pagination
      :total="params.total"
      :limit="params.limit"
      :page="params.page"
      @pagination="paginationHandel"
    />
    <modal-form
      :visibleModal="fromVisible"
      :formItems="formItems"
      @submit="submitHandel"
      @close="fromVisible=false"
      :formData="formData"
      :selectOptionDatas="selectOptionDatas"
    />
    <a-upload v-show="false" ref="videoUpload" accept=".xls,.xlsx" name="file"  :action="uploadUrl" :headers="headers" @change="initData">
      <a-button class="upload-button">文件上传</a-button>
    </a-upload>
  </a-card>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import TablePage from "@/components/TablePage";
import Pagination from "@/components/Pagination";
import ModalForm from "@/components/ModalForm";
import { getToken } from '@/utils/auth'

export default {
  components: {
    SearchBar,
    TablePage,
    Pagination,
    ModalForm,
  },
  data() {
    return {
      loading: false,
      searchItems: [
        { key: "keyword", label: "关键字" }
      ],
      tableCols: [
        { title: "商品编码", dataIndex: "productCode" },
        { title: "商品名称", dataIndex: "productName" },
        { title: "商品图片", dataIndex: "productPic", type: "image" },
        { title: "规格型号", dataIndex: "model" },
        { title: "厂家", dataIndex: "factory" },
        { title: "单价", dataIndex: "price" },
        { title: "单位", dataIndex: "unit" },
        { title: "库存状态", dataIndex: "inventoryStatus", type: "select", width: 100 },
      ],
      operationBtns: [
        { key: "add", label: "添加", pos: "top", type: "primary", perm: [9] },
        { key: "import", label: "导入", pos: "top", type: "primary", perm: [9] },
        { key: "edit", label: "编辑", perm: [9] },
        { key: "delete", label: "删除", perm: [9] },
      ],
      formItems: [
        { key: "productCode", label: "商品编码",
          rule: [
            { required: true, message: "请输入商品编码！", trigger: "blur" },
          ]
        },
        { key: "productName", label: "商品名称",
          rule: [
            { required: true, message: "请输入商品名称！", trigger: "blur" },
          ]
        },
        { key: "productPic", label: "商品图片", type: "uploadImage"
        },
        { key: "model", label: "规格型号",
          rule: [
            { required: true, message: "请输入规格型号！", trigger: "blur" },
          ]
        },
        { key: "factory", label: "厂家",
          rule: [
            { required: true, message: "请输入厂家！", trigger: "blur" },
          ]
        },
        { key: "price", label: "单价", type: "number",
          rule: [
            { required: true, message: "请输入单价！", trigger: "blur" },
          ]
        },
        { key: "unit", label: "单位",
          rule: [
            { required: true, message: "请输入单位！", trigger: "blur" },
          ]
        }, 
        { key: "inventoryStatus", label: "库存状态", type: "select"},
        { key: "isVerify", label: "是否核验", type: "select"},
      ],
      params: { total: 0, limit: 10, page: 0 },
      tableDatas: [],
      selectOptionDatas:{
        inventoryStatus:[{ label: "库存充足", value: 0 }, { label: "库存紧张", value: 1 }, { label: "库存不足", value: 2 }],
        isVerify:[{ label: "需核验", value: 0 }, { label: "不核验", value: 1 }],
      },
      formData: {},
      fromVisible: false,
      uploadUrl: process.env.VUE_APP_BASE_API + "sys/product/import",
      headers: {
        "Authorization": getToken()
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$store
        .dispatch("product/queryList", this.params)
        .then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
    },
    searchHandle(params){
      this.params = { ...this.params, ...params };
      this.initData();
    },
    operationHandel(row, event) {
      var vm = this;
      if (event === "delete") {
        vm.$confirm({
          title: "确定要删除此记录吗？",
          onOk() {
            vm.$store.dispatch("product/deleteProduct", row.id).then(() => {
              vm.initData();
              vm.$message.success("删除成功！");
            });
          },
        });
      } else if (event === "add") {
        vm.fromVisible = true;
        vm.formData = {};
      } else if (event === "edit") {
        vm.fromVisible = true;
        vm.formData = row;
      } else if (event === "import") {
        this.$refs.videoUpload.$el.querySelector('.upload-button').click();
      }
    },
    paginationHandel({ page, limit }) {
      this.params.page = page;
      this.params.limit = limit;
      this.initData();
    },
    submitHandel(data) {
      this.$store
        .dispatch(`product/${data.id ? "update" : "save"}Product`, data)
        .then((res) => {
          this.$message.success("保存成功！");
          this.fromVisible = false;
          this.initData();
        });
    },
  },
};
</script>
<style scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}
</style>